<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
                <el-input v-model="formInline.keyword" placeholder="请输入用户名或姓名"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-col :span="11">
                    <el-form-item prop="startTime">
                        <el-date-picker type="date" placeholder="开始时间" v-model="formInline.startTime"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="endTime">
                        <el-date-picker type="date" placeholder="结束时间" v-model="formInline.endTime"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="dialogVisible.add = true">添加</el-button>
                <el-button type="warning" @click="ManyDelete">批量删除</el-button>
                <el-button type="danger" @click="BulkDelete">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="adminId" label="ID" width="60" align="center">
            </el-table-column>
            <el-table-column prop="fullName" label="姓名" width="180" align="center">
            </el-table-column>
            <el-table-column prop="fullName" label="头像" align="center">
                <template slot-scope="scope">
                    <el-avatar size="small" :key="scope.row.headerImage" :src="getImagePath(scope.row.headerImage)">
                    </el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="lastLoginTime" label="末次登录时间" align="center" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="lastLoginIP" label="末次登录IP" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" align="center" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page" @size-change="handleSizeChange" @current-change="pageChange"
            :page-sizes="pageData.pagesizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total">
        </el-pagination>
        <el-dialog width="40%" :destroy-on-close="true" :visible.sync="dialogVisible.add">
            <span slot="title">添加管理员</span>
            <admin-add ref="adminAdd" @OnSave="SaveSucess"></admin-add>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.add = false">取 消</el-button>
                <el-button type="primary" @click="$refs.adminAdd.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog width="40%" v-if="dialogVisible.edit" :destroy-on-close="true" :visible.sync="dialogVisible.edit">
            <span slot="title">编辑管理员</span>
            <admin-edit ref="adminEdit" :adminId="adminId" @OnSave="SaveSucess"></admin-edit>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.edit = false">取 消</el-button>
                <el-button type="primary" @click="$refs.adminEdit.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { Query, Delete, ManyDelete, BulkDelete } from '../../api/admin';
    import adminAdd from './adminAdd';
    import adminEdit from './adminEdit';
    import moment from 'moment';
    export default {
        name: 'RbacUiAdmin',
        components: {
            adminAdd,
            adminEdit,
        },
        data() {
            return {
                tableData: [],
                dialogVisible: {
                    add: false,
                    edit: false
                },
                pageData: {
                    total: 0,
                    pagesizes: [2, 4, 8, 16],
                },
                formInline: {
                    keyword: '',
                    startTime: '',
                    endTime: '',
                },
                page: {
                    pageindex: 1,
                    pagesize: 2
                },
                adminId: 0,
                multipleSelection: []
            };
        },

        mounted() {
            this.$emit('setTitle', this.$route.meta.title)
            this.initData();
        },

        methods: {
            initData() {
                let query = Object.assign(this.page, this.formInline);
                Query(query).then(x => {
                    this.tableData = x.data.list;
                    this.pageData.total = x.data.totalCount;
                });
            },
            getImagePath(path) {
                return "https://localhost:5001/" + path;
            },
            formatter(row, column, cellValue, index) {
                return cellValue == null ? '-' : moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
            },
            handleEdit(index, row) {
                this.adminId = row.adminId;
                this.dialogVisible.edit = true;
            },
            handleDelete(index, row) {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Delete({ Id: row.adminId }).then(m => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                            onClose: function (msg) {
                                _this.initData();
                            }
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.page.pagesize = val;
                this.initData();
            },
            pageChange(index) {
                this.page.pageindex = index;
                this.initData();
            },
            onSearch() {
                this.initData();
            },
            SaveSucess(res, formName) {
                formName == 'add' ? this.dialogVisible.add = false : this.dialogVisible.edit = false;
                this.initData();
            },
            ManyDelete() {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ManyDelete(this.multipleSelection).then(m => {
                        _this.initData();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            BulkDelete() {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    BulkDelete(this.multipleSelection.map(x=>x.adminId)).then(m => {
                        _this.initData();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
    };
</script>

<style>
    .demo-form-inline {
        padding-left: 30px;
    }

    .line {
        text-align: center;
    }

    .page {
        margin: 16px auto;
        display: table;
    }
</style>